<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw border_bottom">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("设备号") }}：</p>
        <el-input v-model="device_id" :placeholder="$t('请输入设备号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("二维码") }}：</p>
        <el-input v-model="qrcode" :placeholder="$t('请输入二维码')"></el-input>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(1)">
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent(1)">{{ $t("清除") }}</button>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb" style="width: 290px;">
        <p class="label font14 text_black">{{ $t("所属业务员") }}：</p>
        <el-select v-model="salesmanVal" :placeholder="$t('请选择')" @change="salesmanChange">
          <el-option v-for="item in salesmanArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属商户") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(1)">
          <p class="text-ellipsis">{{ merchant ? merchant : $t("选择商户") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearMerchant(1)">{{ $t("清除") }}</button>
      </div>
      
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <!-- <button
        class="sub_btn font14 text_white bg_blue"
        @click="addMoreCabinet"
        v-if="permissions.indexOf('/wired/execlAdd') != -1"
      >{{ $t("批量添加密码线") }}</button> -->
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="bindAgent"
        v-if="permissions.indexOf('/wired/agencyBind') != -1"
      >{{ $t("绑定代理和商户") }}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="id" :label="$t('序列号')"></el-table-column>
        <el-table-column prop="code" :label="$t('二维码')" width="150">
          <template slot-scope="{ row }">
            <p class="text_blue qrcode" @click="viewQrcode(row.code)">
              <i class="icon iconfont iconerweima text_blue"></i>
              {{ $t("查看") }}
            </p>
            {{ row.code }}
          </template>
        </el-table-column>
        <el-table-column prop="seller" :label="$t('所在商铺')"></el-table-column>
        <el-table-column prop="agency" :label="$t('代理商')"></el-table-column>
        <el-table-column prop="employee" :label="$t('业务员')"></el-table-column>
        
        <!-- <el-table-column :label="$t('操作')" width="250" fixed="right">
          <template slot-scope="scope">
            <button
              v-if=" permissions.indexOf('/wired/reset') != -1 "
              class="table_btn font12 bg_blue text_white"
              style="margin-right: 20px;"
              @click="handleReset(scope.row)"
            >{{ $t("复位码") }}</button>
            <button
              v-if="permissions.indexOf('/wired/edit') != -1"
              class="table_btn font12 bg_blue text_white"
              style="margin-right: 20px;"
              @click="updateDevice(scope.row)"
            >{{ $t("修改") }}</button>
            <button
              v-if="permissions.indexOf('/wired/delete') != -1"
              class="table_btn font12 bg_danger text_white"
              @click="deleteCanTab(scope.row)"
            >{{ $t("删除") }}</button>
          </template>
        </el-table-column> -->
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加和修改密码线信息 -->
    <el-dialog
      width="900px"
      :title="updateCab ? $t('修改密码线信息') : $t('添加密码线信息')"
      :visible.sync="showCabDetail"
      :close-on-click-modal="false"
      @close="agentType = 1"
    >
      <div class="order_detail">
        <div class="execl_list u-f u-f-ac" v-if="!updateCab && addMoreCab">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("选择") }}excel：</span>
          </p>
          <upload-excel :on-success="execlSuccess" :text="$t('导入文件')"></upload-excel>
          <span
            class="font14 text_danger"
            style="margin-left: 15px;"
            v-if="!execlFile"
          >{{ $t("未导入文件") }}</span>
          <span
            class="font14 text_blue"
            style="margin-left: 15px;"
            v-if="execlFile"
          >{{ $t("已导入文件") }}</span>
          <span class="download font14 text_blue" @click="downloadTem">
            {{
            $t("下载模板")
            }}
          </span>
        </div>
        <div class="ipt_list u-f u-f-ac" v-if="!addMoreCab">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("设备编号") }}：</span>
          </p>
          <el-input v-model="addCabFrom.device_id" :placeholder="$t('请输入设备编号')"></el-input>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属代理商") }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(2)">
            <p class="text-ellipsis">
              {{
              addCabFrom.agent_name ? addCabFrom.agent_name : $t("平台自营")
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent(2)">{{ $t("清除") }}</button>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属业务员") }}：</span>
          </p>
          <el-select v-model="addSalesmanVal" :placeholder="$t('请选择')" @change="addSalesmanChange">
            <el-option
              v-for="item in addSalesmanArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属商户") }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(2)">
            <p class="text-ellipsis">
              {{
              addCabFrom.merchant_name
              ? addCabFrom.merchant_name
              : $t("选择商户")
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearMerchant(2)">{{ $t("清除") }}</button>
        </div>
        <button
          class="sub_btn font14 text_white bg_blue"
          @click="addMoreSubmit"
          v-if="!updateCab && addMoreCab"
        >{{ $t("提交") }}</button>
        <button
          class="sub_btn font14 text_white bg_blue"
          @click="updateSubmit"
          v-if="updateCab"
        >{{ $t("修改") }}</button>
      </div>
    </el-dialog>

    <!-- 绑定代理和商户 -->
    <el-dialog
      :title="$t('绑定代理和商户')"
      width="1000px"
      :visible.sync="showBindAgent"
      :close-on-click-modal="false"
      @close="agentType = 1"
    >
      <div class="order_detail">
        <div class="div_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属代理商") }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openAgentList(3)">
            <p class="text-ellipsis">
              {{
              bindAgentFrom.agent_name
              ? bindAgentFrom.agent_name
              : $t("平台自营")
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearAgent(3)">{{ $t("清除") }}</button>
        </div>
        <div class="select_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属业务员") }}：</span>
          </p>
          <el-select v-model="bindAgentVal" :placeholder="$t('请选择')" @change="bindAgentChange">
            <el-option
              v-for="item in bindAgentArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="div_box u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{ $t("所属商户") }}：</span>
          </p>
          <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList(3)">
            <p class="text-ellipsis">
              {{
              bindAgentFrom.merchant_name
              ? bindAgentFrom.merchant_name
              : $t("选择商户")
              }}
            </p>
          </div>
          <button class="btn font14 text_white bg_danger" @click="clearMerchant(3)">{{ $t("清除") }}</button>
        </div>
        <div class="ipt_list u-f">
          <p class="lable u-f">
            <span class="font14 text_black">{{ $t("二维码") }}：</span>
          </p>
          <el-input
            type="textarea"
            autosize
            v-model="bindAgentFrom.device_id"
            :placeholder="$t('请输入二维码')"
          ></el-input>
          <p class="tip font14 text_danger">
            {{ $t("二维码之间请用")
            }}
            <span class="text_blue">{{ $t("换行或回车") }}</span>
            {{ $t("分隔") }},{{$t('每次最多输入')}}
            <span class="text_blue">100</span>
            {{ $t("个二维码") }}。{{$t('请确保相应设备没有绑定代理')}}、{{$t('业务员和商户')}},{{$t('否则将与原数据解绑')}}
          </p>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="bindAgentSubmit">{{ $t("提交") }}</button>
      </div>
    </el-dialog>

    <!-- 查看二维码 -->
    <el-dialog :visible.sync="showQRcode" width="240px" :close-on-click-modal="false">
      <img :src="qrcode_img" style="width: 200px; height: 200px;margin-top: -10px;" />
      <p class="font14 text_black" style="text-align: center;margin: 0;">{{ qrcode_txt }}</p>
    </el-dialog>

    <agent-list ref="agentList" :type="agentType" @hide="closeAgentList"></agent-list>
    <merchant-list ref="merchantList" :type="merchantType" :agency_id="m_agency_id" :employee_id="m_employee_id" @hide="closeMerchantList"></merchant-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import merchantList from "components/merchant-list/merchant-list.vue";
import uploadExcel from "components/upload/me-upload-excel.vue";
import { mapState } from "vuex";
import util from "@/assets/js/util.js";
export default {
  name: "wired-index",
  data() {
    let that = this;
    return {
      page: 1,
      page_size: 20,
      total: 0,
      qrcode: "",
      device_id: "",
      salesmanVal: 0,
      salesmanArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      agentType: 1,
      merchantType: 1,
      agent: "",
      agent_id: "",
      merchant: "",
      merchant_id: "",
      tableData: [],
      updateCab: false,
      addMoreCab: false,
      showCabDetail: false,
      execlFile: "",
      addCabFrom: {
        id: "",
        device_id: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: ""
      },
      addSalesmanVal: 0,
      addSalesmanArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      showBindAgent: false,
      bindAgentVal: 0,
      bindAgentArr: [
        {
          id: 0,
          name: that.$t("选择业务员")
        }
      ],
      bindAgentFrom: {
        id: "",
        device_id: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: ""
      },
      showQRcode: false,
      qrcode_img: "",
      qrcode_txt: ""
    };
  },
  components: {
    agentList,
    merchantList,
    uploadExcel
  },
  computed: {
    ...mapState(["permissions"]),
     m_agency_id() {
      if(this.agentType == 1) {
        return this.agent_id
      }else if(this.agentType == 2) {
        return this.addCabFrom.agent_id
      }else if(this.agentType == 3) {
        return this.bindAgentFrom.agent_id
      }
    },
    m_employee_id() {
      if(this.agentType == 1) {
        return this.salesmanVal
      }else if(this.agentType == 2) {
        return this.addSalesmanVal
      }else if(this.agentType == 3) {
        return this.bindAgentVal
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.device_id = ''
      this.qrcode = ''
      this.agent_id = ''
      this.salesmanVal = 0
      this.merchant_id = ''
      this.getData()
    },
    getData(type) {
      if(type == 'search') { this.page = 1 }
      util
        .$http("/wired/index?page=" + this.page, {
          page_size: this.page_size,
          device_id: this.device_id,
          code: this.qrcode,
          agency_id: this.agent_id,
          employee_id: this.salesmanVal,
          sid: this.merchant_id
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    salesmanChange(val) {
      this.salesmanVal = val;
    },
    openAgentList(type) {
      this.agentType = type;
      this.$refs.agentList.show();
    },
    closeAgentList(data, type) {
      let employArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      if (type == 1) {
        this.agent_id = data.id;
        this.agent = data.name;
        this.merchant_id = "";
        this.merchant = "";
        this.getEmployee(data.id, res => {
          this.salesmanArr = [...employArr, ...res];
          this.salesmanVal = 0;
        });
      } else if (type == 2) {
        this.addCabFrom.agent_id = data.id;
        this.addCabFrom.agent_name = data.name;
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
        this.getEmployee(data.id, res => {
          this.addSalesmanArr = [...employArr, ...res];
          this.addSalesmanVal = 0;
        });
      } else if (type == 3) {
        this.bindAgentFrom.agent_id = data.id;
        this.bindAgentFrom.agent_name = data.name;
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
        this.getEmployee(data.id, res => {
          this.bindAgentArr = [...employArr, ...res];
          this.bindAgentVal = 0;
        });
      }
    },
    clearAgent(type) {
      if (type == 1) {
        this.agent_id = "";
        this.agent = "";
        this.merchant_id = "";
        this.merchant = "";
        this.salesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.salesmanVal = 0;
      } else if (type == 2) {
        this.addCabFrom.agent_id = -1;
        this.addCabFrom.agent_name = "";
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
        this.addSalesmanArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.addSalesmanVal = 0;
      } else if (type == 3) {
        this.bindAgentFrom.agent_id = -1;
        this.bindAgentFrom.agent_name = "";
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
        this.bindAgentArr = [
          {
            id: 0,
            name: this.$t("选择业务员")
          }
        ];
        this.bindAgentVal = 0;
      }
    },
    openMerchantList(type) {
      this.merchantType = type;
      this.$refs.merchantList.show();
    },
    closeMerchantList(data, type) {
      if (type == 1) {
        this.merchant_id = data.id;
        this.merchant = data.name;
      } else if (type == 2) {
        this.addCabFrom.merchant_id = data.id;
        this.addCabFrom.merchant_name = data.name;
      } else if (type == 3) {
        this.bindAgentFrom.merchant_id = data.id;
        this.bindAgentFrom.merchant_name = data.name;
      }
    },
    clearMerchant(type) {
      if (type == 1) {
        this.merchant_id = "";
        this.merchant = "";
      } else if (type == 2) {
        this.addCabFrom.merchant_id = "";
        this.addCabFrom.merchant_name = "";
      } else if (type == 3) {
        this.bindAgentFrom.merchant_id = "";
        this.bindAgentFrom.merchant_name = "";
      }
    },
    addSalesmanChange(val) {
      this.addSalesmanVal = val;
    },
    addMoreSubmit() {
      let formData = new FormData();
      formData.append("file", this.execlFile);
      formData.append("agency_id", this.addCabFrom.agent_id);
      formData.append("employee_id", this.addSalesmanVal);
      formData.append("sid", this.addCabFrom.merchant_id);
      util.$http("/wired/execlAdd", formData).then(res => {
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.updateCab = false;
          this.addMoreCab = false;
          this.showCabDetail = false;
          this.agentType = 1
          this.getData();
          this.addCabFrom = {
            id: "",
            device_id: "",
            agent_id: -1,
            agent_name: "",
            merchant_id: "",
            merchant_name: ""
          };
          this.addSalesmanArr = [
            {
              id: 0,
              name: this.$t("选择业务员")
            }
          ];
          this.addSalesmanVal = 0;
          this.execlFile = "";
        } else if (res.code == 301) {
          this.$confirm(
            this.$t("表格上传失败") + "," + this.$t("是否要下载错误日志")
          )
            .then(() => {
              window.location.href = res.msg;
            })
            .catch(() => {});
        }
      });
    },
    execlSuccess(file) {
      this.execlFile = file;
    },
    downloadTem() {
      window.location.href = 'https://cdb.workair.vip/statics/wired.xlsx'
    },
    bindAgent() {
      this.showBindAgent = true;
      this.agentType = 3
      this.bindAgentFrom = {
        id: "",
        device_id: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: ""
      };
      this.bindAgentArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.bindAgentVal = 0;
    },
    bindAgentChange(val) {
      this.bindAgentVal = val;
    },
    bindAgentSubmit() {
      let str = this.bindAgentFrom.device_id.replace(/\n/g, ',')
      util
        .$http("/wired/agencyBind", {
          codes: str,
          agency_id: this.bindAgentFrom.agent_id,
          employee_id: this.bindAgentVal,
          sid: this.bindAgentFrom.merchant_id
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.bindAgentFrom = {
              id: "",
              device_id: "",
              agent_id: -1,
              agent_name: "",
              merchant_id: "",
              merchant_name: ""
            };
            this.bindAgentArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.bindAgentVal = 0;
            this.showBindAgent = false;
            this.agentType = 1
            this.getData();
          }
        });
    },
    updateSubmit() {
      util
        .$http("/wired/edit", {
          id: this.addCabFrom.id,
          agency_id: this.addCabFrom.agent_id,
          employee_id: this.addSalesmanVal,
          sid: this.addCabFrom.merchant_id
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.updateCab = false;
            this.addMoreCab = false;
            this.showCabDetail = false;
            this.agentType = 1
            this.getData();
            this.addCabFrom = {
              id: "",
              device_id: "",
              agent_id: -1,
              agent_name: "",
              merchant_id: "",
              merchant_name: ""
            };
            this.addSalesmanArr = [
              {
                id: 0,
                name: this.$t("选择业务员")
              }
            ];
            this.addSalesmanVal = 0;
          }
        });
    },
    addMoreCabinet() {
      this.addCabFrom = {
        id: "",
        device_id: "",
        agent_id: -1,
        agent_name: "",
        merchant_id: "",
        merchant_name: ""
      };
      this.addSalesmanArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.addSalesmanVal = 0;
      this.agentType = 2
      this.execlFile = "";
      this.updateCab = false;
      this.addMoreCab = true;
      this.showCabDetail = true;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    handleReset(row) {
      let str = ''
      if(row.type == 'dmm') {
        str = this.$t("请先按C键") + this.$t("然后在密码线上输入复位码") + row.reset_code
      }else {
        str = this.$t("是否要复位")
      }
      this.$confirm(str)
        .then(() => {
          util
            .$http("/wired/reset", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    updateDevice(row) {
      let employArr = [
        {
          id: 0,
          name: this.$t("选择业务员")
        }
      ];
      this.updateCab = true;
      this.addMoreCab = false;
      this.showCabDetail = true;
      this.agentType = 2
      setTimeout(() => {
        util
        .$http("/wired/detail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.addCabFrom = {
              id: res.data.id,
              device_id: res.data.device_id,
              agent_id: res.data.agency_id,
              agent_name: res.data.agency_name,
              merchant_id: res.data.sid,
              merchant_name: res.data.seller_name
            };
            this.getEmployee(res.data.agency_id, res => {
              this.addSalesmanArr = [...employArr, ...res];
            });
            this.addSalesmanVal = res.data.employee_id;
          }
        });
      }, 150);
    },
    deleteCanTab(row) {
      this.$confirm(this.$t("是否要删除当前密码线"))
        .then(() => {
          util
            .$http("/wired/delete", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    getEmployee(id, callback) {
      util
        .$http("/seller/employeeList", {
          id
        })
        .then(res => {
          if (res.code == 1) {
            callback(res.data);
          }
        });
    },
    viewQrcode(qrcode) {
      this.showQRcode = true;
      this.qrcode_img = util.config.host + "/auth/qrcode?type=wired&text=" + qrcode;
      this.qrcode_txt = qrcode;
    }
  }
};
</script>

<style scoped>
.head_search {
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 21px;
  cursor: pointer;
  border-radius: 4px;
}
.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.qrcode {
  cursor: pointer;
  margin: 0;
}
.circle {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 100%;
}
.cabinet_status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
}
.table_btn {
  cursor: pointer;
  padding: 7px 10px;
  border: 0;
  outline: 0;
  border-radius: 4px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail {
  padding-left: 50px;
}
.order_detail .execl_list {
  margin-bottom: 20px;
}
.order_detail .execl_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .execl_list .download {
  cursor: pointer;
  margin-left: 15px;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 170px;
}
.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.order_detail .ipt_list .el-textarea {
  width: 300px;
}
.order_detail .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
.order_detail .ipt_list .tip {
  width: 300px;
  margin: 0 0 0 15px;
}
.order_detail .select_box {
  margin-bottom: 20px;
}
.order_detail .select_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .select_box .el-select {
  width: 170px;
}
.order_detail .div_box {
  margin-bottom: 20px;
}
.order_detail .div_box .lable {
  width: 100px;
  margin: 0;
}
.order_detail .div_box .content {
  width: 170px;
  height: 36px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.order_detail .div_box .content:active {
  border-color: #409eff;
}
.order_detail .div_box .btn {
  width: 60px;
  height: 36px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.order_detail .sub_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 25px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
  margin-left: 100px;
  margin-top: 20px;
}
</style>
<style>
.order_detail .ipt_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>
